<template>
	<view class="identity-page">
		<view class="select-box">
			<view class="active-box">
				<view class="active-box-title">
					{{activeItemData.name}}
				</view>
				<view class="active-box-img">
					<image :src="activeItemData.img"></image>
					<view class="active-box-bg"></view>
				</view>
			</view>
			<view
			  class="select-item"
			  v-for="(item,index) in identityData"
			  :key="index"
			  ref="JItem"
			  @click="changeItem(item.value, index)"
			>
				<image v-if="item.value === activeItem" class="active-img" src="../../static/images/icon/gou.png"></image>
				<image class="select-img" :src="item.img"></image>
				{{item.name}}
			</view>
		</view>
		<button
		  @click="toSave"
		  class="save-btn"
		  hover-class="btn-active"
		>
			保存
		</button>
	</view>
</template>

<script>
	import { mapMutations } from 'vuex'
	export default {
		data () {
			return {
				identityData: [
					{
						img: '../../static/images/icon/gougou.png',
						name: '舔狗',
						value: 'dog'
					},
					{
						img: '../../static/images/icon/youyuzi.png',
						name: '海王',
						value: 'king'
					},
					{
						img: '../../static/images/icon/xianyu.png',
						name: '鱼',
						value: 'fish'
					},
					{
						img: '../../static/images/icon/lang.png',
						name: '战狼',
						value: 'wolf'
					}
				],
				activeItem: '',   // 被选中的item
				activeItemData: {
					img: '../../static/images/icon/suijiyonghu.png',
					name: '请先选角色',
					value: ''
				},   // 被选中的角色数据
			}
		},
		methods: {
			// 选择角色
			changeItem(value, index) {
				this.activeItem = value
				this.activeItemData = this.identityData[index]
				this.$refs.JItem.forEach((item) => {
					item.$el.className = 'select-item';
				})
				this.$refs.JItem[index].$el.className = "active-item select-item"
			},
			// 保存角色
			toSave(){
				uni.showLoading({
					title: '保存中...'
				})
				if (this.activeItem) {
					// 将角色数据保存到vuex
					this.SET_IDENTITY(this.activeItemData)
					uni.setStorageSync('userIdentity', this.activeItemData)
					uni.showToast({
						title: '保存成功',
					})
					// 保存完跳转到首页
					setTimeout(() => {
						// uni.navigateTo({
						// 	url: '../../gamePages/checkMines/checkMines'
						// })
						uni.switchTab({
							url: '../../pages/index/index'
						})
					}, 500)
					
				} else {
					uni.showToast({
						title: '请先选择角色',
						icon: 'error'
					})
				}
			},
			...mapMutations(['SET_IDENTITY'])
		}
	}
</script>

<style lang="scss" scoped>
	.identity-page {
		position: relative;
		width: 100%;
		height: 100%;
		min-height: calc(100vh - 80rpx);
		background: #F9F9F9;
		padding-bottom: 65px;
		.active-box {
			width: 100%;
			height: calc(60vw + 40rpx);
			.active-box-title {
				text-align: center;
				font-size: 50rpx;
				font-weight: bold;
			}
			.active-box-img {
				position: relative;
				image {
					position: absolute;
					z-index: 2;
					width: 40vw;
					height: 40vw;
					top: 50%;
					left: 50%;
					margin-top: 10vw;
					margin-left: -20vw;
				}
				.active-box-bg {
					position: absolute;
					z-index: 1;
					width: 34vw;
					height: 34vw;
					top: 50%;
					left: 50%;
					margin-top: 10vw;
					margin-left: -20.6vw;
					border-radius: 50%;
					border: #d8b1aa solid 15px;
				}
			}
		}
		.select-box {
			display: flex;
			flex-wrap: wrap;
			padding: 10px 0 0 0;
			.select-item {
				position: relative;
				width:40vw;
				height: 44vw;
				margin: 4.7vw;
				padding-bottom: 20rpx;
				color: #4f4f4f;
				font-weight: bold;
				text-align: center;
				background-color: #fff;
				border-radius: 25rpx;
				.select-img {
					width: 70%;
					height: 60%;
					margin: 15% 15% 8% 15%;
				}
				.active-img {
					position: absolute;
					right: 5%;
					top: 5%;
					width: 15%;
					height: 14%;
				}
			}
			.active-item {
				border: #1a73e8 solid 2px;
				box-sizing: border-box;
			}
		}
		.save-btn {
			position: fixed;
			bottom: 10upx;
			width: 90%;
			margin: 10px 5%;
			color: #fff;
			background-color: #1a73e8;
			&.btn-active {
				background-color: #1c67df;
			}
		}
	}
</style>